<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>推广员</el-breadcrumb-item>
            </el-breadcrumb>


            <el-tabs v-model="activeName">
                <el-tab-pane label="推广员列表" name="list">
                    <div class="btnBox">
                        <div>
                            <span>人员名称：</span>
                            <el-input size="small" v-model="userName" placeholder="请输入推广员名称"></el-input>
                        </div>
                        <div>
                            <el-button size="small" icon="el-icon-search" @click="getUserList('search')">搜索</el-button>
                            <el-button size="small" icon="el-icon-refresh-right" @click="getList('res')">重置</el-button>
                        </div>
                    </div>
                    <el-table :data="tableData" border style="width: 100%" height="590">
                        <el-table-column v-if="companyId == 1" prop="companyName" label="分销公司"></el-table-column>
                        <el-table-column prop="userId" label="推广员ID" width="100"></el-table-column>
                        <el-table-column prop="userName" label="名称" width="100"></el-table-column>
                        <el-table-column prop="rechargeMoney" label="会员充值金额总(元)"></el-table-column>
                        <el-table-column prop="rechargeNum" label="会员充值次数总(元)"></el-table-column>
                        <el-table-column prop="totalMoney" label="总佣金"></el-table-column>
                        <el-table-column prop="grantMoney" label="已结算"></el-table-column>
                        <el-table-column label="待结算">
                            <template slot-scope="scope">
                                {{ scope.row.totalMoney * 1 - scope.row.grantMoney * 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column label="状态" width="100">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.userType == 2">在职</el-tag>
                                <el-tag type="warning" v-else>离职</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="300" v-if="companyId != 1">
                            <template slot-scope="scope">
                                <el-button size="small" icon="el-icon-coin"
                                    @click="handle('jie', scope.row)">结算</el-button>
                                <el-button size="small" icon="el-icon-tickets"
                                    @click="handle('detail', scope.row)">结算详情</el-button>
                                <el-button size="small" icon="el-icon-close"
                                    @click="leaveHandle(scope.row)">离职</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="paginationBox">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="推广员申请列表" name="apply">
                    <div class="btnBox">
                        <div>
                            <el-button size="small" icon="el-icon-plus" @click="submitApplyAll()">批量同意</el-button>
                        </div>
                    </div>
                    <el-table :data="applyTable" border style="width: 100%" height="630"
                        @selection-change="selectChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="applyId" label="ID" width="70"></el-table-column>
                        <el-table-column v-if="companyId == 1" prop="companyName" label="分销公司"></el-table-column>
                        <el-table-column prop="userName" label="名称" width="100"></el-table-column>
                        <el-table-column label="申请类型" width="120">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.applyStatus == 0">申请推广员</el-tag>
                                <el-tag type="warning" v-else>离职申请</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="applyReason" label="申请理由" width="100"></el-table-column>
                        <el-table-column prop="createTime" label="申请时间"></el-table-column>
                        <el-table-column prop="handleTime" label="处理时间"></el-table-column>
                        <el-table-column prop="handleTimeM" label="总公司处理时间"></el-table-column>
                        <el-table-column label="公司意见" width="100">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.companyOpinion == 1">已同意</el-tag>
                                <el-tag type="warning" v-else>未处理</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="总部意见" width="100">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.mainCompanyOpinion == 1">已同意</el-tag>
                                <el-tag type="warning" v-else>未处理</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <!-- 推广公司处理 -->
                                <el-button size="small" icon="el-icon-tickets"
                                    v-if="(scope.row.companyOpinion == 0 && companyId != 1) || (scope.row.mainCompanyOpinion == 0 && companyId == 1)"
                                    @click="gsApplyHandle(scope.row)">处理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="paginationBox">
                        <el-pagination @size-change="aHandleSizeChange" @current-change="aHandleCurrentChange"
                            :current-page="aPageNum" :page-sizes="[50, 100, 200]" :page-size="aPageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="aTotalNum"></el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="推广员离职列表" name="leave">
                    <div class="btnBox">
                        <div>
                            <el-button size="small" icon="el-icon-plus" @click="LeaveApplyAll()">批量同意</el-button>
                        </div>
                    </div>
                    <el-table :data="leaveTable" border style="width: 100%" height="630"
                        @selection-change="selectChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="applyId" label="ID" width="70"></el-table-column>
                        <el-table-column v-if="companyId == 1" prop="companyName" label="分销公司"></el-table-column>
                        <el-table-column prop="userName" label="名称" width="100"></el-table-column>
                        <el-table-column label="申请类型" width="120">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.applyStatus == 0">申请推广员</el-tag>
                                <el-tag type="warning" v-else>离职申请</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="applyReason" label="申请理由" width="100"></el-table-column>
                        <el-table-column prop="createTime" label="申请时间"></el-table-column>
                        <el-table-column prop="handleTime" label="处理时间"></el-table-column>
                        <el-table-column prop="handleTimeM" label="总公司处理时间"></el-table-column>
                        <el-table-column label="公司意见" width="100">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.companyOpinion == 1">已同意</el-tag>
                                <el-tag type="warning" v-else>未处理</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="总部意见" width="100">
                            <template slot-scope="scope">
                                <el-tag type="success" v-if="scope.row.mainCompanyOpinion == 1">已同意</el-tag>
                                <el-tag type="warning" v-else>未处理</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <!-- 推广公司处理 -->
                                <el-button size="small" icon="el-icon-tickets"
                                    v-if="(scope.row.companyOpinion == 0 && companyId != 1) || (scope.row.mainCompanyOpinion == 0 && companyId == 1)"
                                    @click="gsApplyHandle(scope.row)">处理</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="paginationBox">
                        <el-pagination @size-change="aHandleSizeChange" @current-change="aHandleCurrentChange"
                            :current-page="aPageNum" :page-sizes="[50, 100, 200]" :page-size="aPageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="aTotalNum"></el-pagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>



        <!-- 弹窗 -->
        <el-dialog :title="diaFlag == 'jie' ? '结算' : '结算记录'" :visible.sync="addDia" width="30%"
            :before-close="closeAddDialog">
            <template v-if="diaFlag == 'jie'">
                <el-form :model="currentObj" :rules="rules" ref="form" label-width="120px">
                    <el-form-item label="待结算佣金">
                        <div class="jieNum">{{ currentObj.totalMoney * 1 - currentObj.grantMoney * 1 }} <span>元</span>
                        </div>
                    </el-form-item>
                    <el-form-item label="本次结算佣金" prop="jieNum">
                        <el-input type="number" v-model="grantNum" @input="inputHandle" placeholder="请输入本次结算佣金">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="剩余佣金" prop="resNum">
                        <el-input v-model="restNum" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="备注" prop="note">
                        <el-input v-model="Note" placeholder="请输入备注信息"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeAddDialog">取 消</el-button>
                    <el-button type="primary" @click="submitAddDialog">确 定</el-button>
                </span>
            </template>
            <template v-if="diaFlag == 'detail'">
                <el-table :data="jieDetailList" border style="width: 100%">
                    <el-table-column prop="totalMoney" label="结算金额"></el-table-column>
                    <el-table-column prop="dateTime" label="结算时间"></el-table-column>
                    <el-table-column prop="detailNote" label="备注"></el-table-column>
                </el-table>
            </template>
        </el-dialog>


        <!-- 离职 -->
        <el-dialog title="离职原因" :visible.sync="leaveDia" width="30%" :before-close="closeLeaveDialog">
            <el-form :model="leaveForm" label-width="100px">
                <el-form-item label="离职原因">
                    <el-input v-model="leaveForm.note" placeholder="请输入离职原因"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeLeaveDialog">取 消</el-button>
                <el-button type="primary" @click="submitLeave">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 申请弹窗 -->
        <el-dialog title="申请处理" :visible.sync="applyDia" width="30%" :before-close="closeApplyDialog">
            <div class="tipBox">
                <span> 邀请总人数：<span>{{ userTotal }}</span> 人</span>
                <span> 邀请会员人数：<span>{{ userVipTotal }}</span> 人</span>
            </div>
            <el-table :data="applyUserList" border style="width: 100%">
                <el-table-column prop="userName" label="名称"></el-table-column>
                <el-table-column prop="createTime" label="邀请时间"></el-table-column>
                <el-table-column label="会员等级">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.vipLevel != 0">VIP{{ scope.row.vipLevel }}</el-tag>
                        <el-tag type="warning" v-else>未开通会员</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeApplyDialog">取 消</el-button>
                <el-button type="primary" @click="submitApply">通 过</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { getPromoterApplyList, getpromoterList, addCommission, listCommission, PromoterDown, applyPromoter, PromoterDownApply, listMyUser } from '../../network/saleuser'
export default {
    data() {
        return {
            applyType: 2,
            companyId: 0,
            Note: "",
            grantNum: 0,
            restNum: 0,
            tableData: [],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            userName: '', // 推广员名称
            selectGsId: '',//推广公司 id
            addDia: false, // 弹窗
            diaFlag: '',//  jie  结算弹窗   detail  结算详情 

            rules: {
                grantNum: [
                    { required: true, message: '请输入本次结算佣金', trigger: 'blur' },
                ],
            },
            jieDetailList: [],//结算佣金详细记录

            leaveDia: false,
            leaveForm: {
                userId: 0,
                note: '',
                companyId: 0

            },
            applyFrom: {
                userId: 0,
                applyId: 0,
                companyId: 0,
            },
            activeName: 'list',


            // 申请列表 部分
            applyTable: [],
            leaveTable:[],

            aPageSize: 50,
            aPageNum: 1,
            aTotalNum: 0,
            applyDia: false,

            applyList: [],//申请详情

            checkList: [],// 选择的数据
            currentObj: '',

            applyUserList: [],//邀请的人
            userTotal: 0,
            userVipTotal: 0,

        };
    },
    methods: {

        handle(flag, obj) {
            this.diaFlag = flag
            if (flag == 'detail') {
                listCommission({
                    userId: obj.userId
                }).then(res => {
                    this.jieDetailList = res.data.reverse();
                    this.addDia = true
                })
            } else {
                console.log(obj);
                this.grantNum = 0,
                    this.restNum = 0,
                    this.Note = "",
                    this.currentObj = obj;
                this.addDia = true;
            }

        },
        submitApplyAll(){
            this.applyFrom.userId = null;
            let Ids = '';
            for(let i=0;i<this.checkList.length;i++){
                Ids = Ids+this.checkList[i].applyId+','
            }
            this.applyFrom.applyId = Ids
            this.applyFrom.companyId= sessionStorage.companyId
            //审核成为推广员通过
            PromoterDownApply(this.applyFrom).then(res => {
                        if (res.flag) {
                            this.$message.success('操作成功')
                            this.getList();
                            this.applyDia = false;
                        }
                    })
        },LeaveApplyAll(){
            this.applyFrom.userId = null;
            let Ids = '';
            for(let i=0;i<this.checkList.length;i++){
                Ids = Ids+this.checkList[i].applyId+','
            }
            this.applyFrom.applyId = Ids
            this.applyFrom.companyId= sessionStorage.companyId
            applyPromoter(this.applyFrom).then(res => {
                        if (res.flag) {
                            this.$message.success('操作成功')
                            this.getList();
                            this.applyDia = false;
                        }
                    })
        }
        ,

        //   提交结算
        submitAddDialog() {
            this.$refs.form.validate((valid) => {
                if (!valid) return
                addCommission({
                    userId: this.currentObj.userId,
                    grantMoney: this.grantNum,
                    note: this.Note
                }).then(res => {
                    if (res.flag) {
                        this.getUserList('search');
                        this.closeAddDialog();
                    }
                })
            });
        },

        // 提交离职申请
        submitLeave() {
            if (this.leaveForm.note == '') {
                this.$message.warning('请输入离职原因')
            }
            PromoterDown(this.leaveForm).then(res => {
                this.leaveDia = false;
                this.getUserList('search');
                this.getList();
            })
            console.log(this.leaveForm);

        },

        leaveHandle(obj) {
            this.leaveForm.userId = obj.userId
            this.leaveForm.companyId = obj.companyId
            this.leaveDia = true
        },

        // 检测本次结算佣金
        inputHandle() {
            if (this.currentObj.totalMoney * 1 - this.currentObj.grantMoney * 1 - this.grantNum < 0) {
                this.$message.warning('结算佣金大于待结算佣金，请仔细核对');
                this.grantNum = 0;
                return;

            }
            this.restNum = this.currentObj.totalMoney * 1 - this.currentObj.grantMoney * 1 - this.grantNum * 1

        },

        getUserList(flag) {
            if (flag == 'search') {
                // 获取数据
                console.log(this.userName);
                console.log(this.selectGsId);
                getpromoterList({
                    userName: this.userName,
                    companyId: sessionStorage.companyId,
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                }).then(res => {
                    console.log(res);
                    this.tableData = res.data.list;
                    this.totalNum = res.total;

                })


            } else if (flag == 'res') {
                this.tableData = []
                this.userName = ''
                this.selectGsId = ''
                this.$message.success('已重置')
            }
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.getUserList('search')
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getUserList('search')
        },

        closeAddDialog() {
            this.addDia = false
            if (this.diaFlag == 'jie') {
                this.$refs.form.resetFields()
            }
        },


        // 申请列表部分

        getApplyList() {

        },

        // 公司审核
        gsApplyHandle(obj) {
            // 根据id  获取信息
            this.applyType = obj.applyStatus
            this.applyFrom.applyId = obj.applyId
            this.applyFrom.companyId = sessionStorage.companyId
            this.applyFrom.userId = obj.userId

            if (this.applyType == 0) {
                this.getOwnUser(obj.userId)
            } else {
                this.submitApply()
            }

        },

        // 总部审核
        applyHandle() {

            if (this.checkList.length == 0) {
                this.$message.warning('请选择要操作的数据')
                return
            }

            this.$confirm('是否通过所选申请审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

            }).catch(() => {
            });

        },
        getOwnUser(id) {
            listMyUser({
                userId: id,
                flag: 2
            }).then(res => {
                if (res.flag) {
                    this.applyDia = true
                    this.userTotal = res.data.myUsers.length
                    this.userVipTotal = 0
                    res.data.myUsers.forEach(item => {
                        if (item.vipLevel != 0) {
                            this.userVipTotal += 1
                        }
                    })
                    this.applyUserList = res.data.myUsers
                }
            })
        },
        // 通过申请
        submitApply() {
            this.$confirm('是否通过申请审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                if (this.applyType == 0) {
                    //审核成为推广员通过
                    applyPromoter(this.applyFrom).then(res => {
                        if (res.flag) {
                            this.$message.success('操作成功')
                            this.getList();
                            this.applyDia = false;
                        }
                    })
                } else {
                    //审核离职通过
                    PromoterDownApply(this.applyFrom).then(res => {
                        if (res.flag) {
                            this.$message.success('操作成功')
                            this.getList();
                            this.applyDia = false;
                        }
                    })
                }
            }).catch(() => {
            });
        },

        aHandleSizeChange(val) {
            this.aPageSize = val;
            this.getList()
        },
        aHandleCurrentChange(val) {
            this.aPageNum = val;
            this.getList()
        },

        closeApplyDialog() {
            this.applyDia = false
        },
        closeLeaveDialog() {
            this.leaveDia = false
        },


        selectChange(val) {
            this.checkList = val
        },

        getList() {
            getPromoterApplyList({
                companyId: sessionStorage.companyId,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                type: 0
            }).then(res => {
                if (res.flag) {
                    this.applyTable = res.data.list;
                    this.aTotalNum = res.data.total
                }
            }),
            getPromoterApplyList({
                companyId: sessionStorage.companyId,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                type: 1
            }).then(res => {
                if (res.flag) {
                    this.leaveTable = res.data.list;
                    this.aTotalNum = res.data.total
                }
            })
        },

    },
    created() {

        this.getUserList('search');
        this.getList();
        this.companyId = sessionStorage.companyId;

    },
    filters: {

    },
};
</script>

<style scoped>
.btnBox>div>span {
    width: 100px;
    display: inline-block;
    font-size: 14px;
}

.nameTip {
    margin-bottom: 16px;
}

.btnBox {
    margin-top: 0px;
}


.jieNum {
    font-size: 22px;
    color: rgb(228, 37, 37);
}

.jieNum>span {
    font-size: 16px;
}

.tipBox>span {
    display: inline-block;
    margin: 0 16px 16px 0;
}

.tipBox>span>span {
    font-size: 18px;
    color: #EF5931;
}
</style>